<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h2>{{fullname}}</h2>
        <input type="text" v-model='firstname'>
        <input type="text" v-model='secondname'>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            firstname:'',
            secondname:'',
            fullname:'',
            obj:{
                a:123
            }
        },
        methods: {
            qqq(){
                console.log(6666)
            }
        },
        // computed: {
        //     fullname(){
        //         return {
        //             name:this.name,
        //             age:this.firstname
        //         }
        //     }
        // },
        watch: {
            // 监听 ； 这里的属性 都是i已经存在的属性
            name(newV,oldV){
                // 只要name发生改变 我就执行这个函数
                console.log(newV,oldV)
            },
            firstname(){
                setTimeout(() => {
                    this.fullname = this.firstname + ' ' + this.secondname
                }, 2000);
                
            },
            secondname(){
                setTimeout(() => {
                    this.fullname = this.firstname + ' ' + this.secondname
                }, 2000);
            },
            // obj(){
            //     console.log(this.obj.a)
            // }
            // obj:{
            //     deep:true,// 深度监听； 可见听对象中度的所有后代属性 默认值false
            //     immediate:true, //默认值时false  初始化赋值的时候 要触发函数
            //     handler(newV,oldV){
            //         // 深度监听时  newv === oldV
            //         console.log(newV , oldV)
            //         console.log(this.obj.a)
            //     }
            // }
            obj:[
                'qqq',
                {
                    deep:true,
                    handler:function hadsdfgsd(){console.log(1)}
                },
                {
                    deep:true,
                    handler(){console.log(2)}
                },
                function f(){
                    console.log(3)
                }
            ]
        },
    });
</script>
<!-- 
    计算属性的有点  可以以较少的代码实现比较复杂的功能（当某个属性依赖于 其他几个数据的时候）
                这是若使用watch的时候 则 需要把这个几个依赖全都watch了 代码比较冗余
    计算属性的缺点  不支持异步，当涉及到异步的时候 计算属性没办法满足， 这是就可以使用watch            


 -->